Design Tokens
Tokens, mixins and overall approach for breakpoints and media queries. (E.g. making sure printing pages works)
Token system, tools (analytics) and language for building and designing for responsive screens. What is the right language to talk about breakpoints? Which screen widths do we need design for? How to handle breakpoints in our design tooling? What about paper/printing media? Horizontal breakpoints? Core of this work is likely the shared language between designers + dev, letting us out from ‘this is the iphone 11 screen, this is the tablet screen’ thinking. Plus of course learnings from the the breakpointless approach from https://every-layout.dev/
Nowadays you might not need breakpoints
You don't need to use breakpoints all the time. You can instead design layouts that resize and move around without breakpoint logix, but with flex and flow and grid logic. Historically it has been a good idea to have certain amount of columns in different sizes, but that is a blast from past. 12 columns is a legacy from past technical constraints.
Breakpoints is not just about device width
CSS media queiries can handle vertical breakpoints too. Designing breakpoints for vertical space is just not that common, and the number of pixel specs increase geometrically.
To read
- Every layout
- Mobile first
- Going responsive
- Responsive web design
- Responsible responsive design
- Responsive design patterns principles